import QtQuick 2.12
import QtQuick.Controls 2.5
import QtMultimedia 5.13


Page {
    width: 600
    height: 400

    property int nBottomMargin: 171
    property int nSideOffset: 98
    property int nRightMargin: 90
    property bool isPowerOn: false
    //    property alias elementFontfamily: element.font.family

    //    header: Label {
    //        text: qsTr("Page 1")
    //        font.pixelSize: Qt.application.font.pixelSize * 2
    //        padding: 10
    //    }

    signal moveToRoasterChicken()
    signal moveToGrilledSteak()
    signal moveToBratwurst()
    signal gotoMenuMode()

    MediaPlayer {
        id: sound_powerOn
        source: "qrc:/sound/powerOn.mp3"
    }

    MediaPlayer {
        id: sound_powerOff
        source: "qrc:/sound/powerOff.mp3"
    }


    MediaPlayer {
        id: sound_taskStart
        source: "qrc:/sound/taskStart.mp3"
    }

    MediaPlayer {
        id: sound_taskCompleted
        source: "qrc:/sound/taskCompleted.mp3"
    }


    MouseArea {
        anchors.fill: parent
        onClicked: {
            print("isPowerOn: ", isPowerOn)
            if (isPowerOn) {
                emit: gotoMenuMode()
            }
        }
    }


//    Text {
//        id: element
//        opacity: 0
//        x: 49
//        y: 15
//        width: 1136
//        height: 586
//        color: "#fbfbfb"
//        text: qsTr("Today's Recommend\n-ation")
//        verticalAlignment: Text.AlignTop
//        wrapMode: Text.WordWrap
//        lineHeight: 0.9
//        horizontalAlignment: Text.AlignLeft
//        font.pixelSize: 250
//        font.family: "UNDA Circle"
//        font.letterSpacing: 5
//        font.bold: false
//    }


    Rectangle {
        color: "white"
        opacity: 0.5
        anchors.fill: parent
    }



    Image {
        id: element
        opacity: 0
        x: 69
        y: 54
        width: 1136
        height: 586
        source: "qrc:/imgs/recommend.png"
    }



    Rectangle {
        id: bratwurst
        opacity: 0
        color: "transparent"
        width: 190//214
        height: 190//214
        radius: 100
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        anchors.bottomMargin: nBottomMargin
        anchors.rightMargin: nSideOffset
        Image {
            id: img1
            anchors.fill: parent
            source: "qrc:/imgs/bratwurst.png"
            Behavior on scale { PropertyAnimation{duration: 100}}
        }

        Text {
            text: "Bratwurst"
            color: "#BEBEBE"
            font.pixelSize: 30
            font.family: "Gotham Book"
            anchors.horizontalCenter: img1.horizontalCenter
            anchors.top: img1.bottom
            anchors.topMargin: 30
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                img1.scale = 1.2
            }
            onExited: {
                img1.scale = 1.0
            }

            onClicked: {
                print("xxxclicked")
                sound_taskStart.play()
            }
        }
    }


    Rectangle {
        id: roastchicken
        opacity: 0
        color: "transparent"
        anchors.bottom: parent.bottom
        anchors.right: bratwurst.left
        anchors.bottomMargin: nBottomMargin
        anchors.rightMargin: nRightMargin
        width: 190//214
        height: 190//214
        radius: 100
        Image {
            id: img3
            anchors.fill: parent
            source: "qrc:/imgs/roastchicken.png"
            Behavior on scale { PropertyAnimation{duration: 100}}
        }

        Text {
            text: "Roast Chicken"
            color: "#BEBEBE"
            font.pixelSize: 30
            font.family: "Gotham Book"
            anchors.horizontalCenter: img3.horizontalCenter
            anchors.top: img3.bottom
            anchors.topMargin: 30
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                img3.scale = 1.2
            }
            onExited: {
                img3.scale = 1.0
            }

            onClicked: {
//                sound_powerOff.play()
                emit: moveToRoasterChicken()
            }
        }
    }


    Rectangle {
        id: grilledsteak
        opacity: 0
        color: "transparent"
        width: 190//214
        height: 190//214
        radius: 100
        anchors.bottom: parent.bottom
        anchors.right: roastchicken.left
        anchors.bottomMargin: nBottomMargin
        anchors.rightMargin: nRightMargin
        Image {
            id: img2
            anchors.fill: parent
            source: "qrc:/imgs/grilledsteak.png"
            sourceSize.width: 213
            sourceSize.height: 212
            Behavior on scale { PropertyAnimation{duration: 100}}
        }

        Text {
            text: "Grilled Steak"
            color: "#BEBEBE"
            font.pixelSize: 30
            font.family: "Gotham Book"
            anchors.horizontalCenter: img2.horizontalCenter
            anchors.top: img2.bottom
            anchors.topMargin: 30
        }

        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                img2.scale = 1.2
            }
            onExited: {
                img2.scale = 1.0
            }

            onClicked: {
                sound_taskStart.stop()
                sound_taskStart.seek(1)
            }
        }
    }

    PropertyAnimation {
        id: ani
        targets: [element, grilledsteak, roastchicken, bratwurst]
        property: "opacity"
        to: 1.0
        duration: 800
    }

    function playAni() {
        resetAni()
        ani.start()
        isPowerOn = true
    }

    function resetAni() {
        isPowerOn = false
        element.opacity = 0.0
        grilledsteak.opacity = 0.0
        roastchicken.opacity = 0.0
        bratwurst.opacity = 0.0
    }
}



